import './StartBackConfig.scss'

import { ColorCallBack } from '../../Utils'
import { VideoTempA01 } from '../../Utils/VideoTemp'



const StartBackConfig = ({ config }) => {
    const { backType, backColor, backColor__Deg, backImage, backVideo, backVideoStart, backVideoEND } = config
    const { backTop, backTop_url, backTop_height, backTop_paddingTop, backTop_paddingLeft } = config
    const { backBtm, backBtm_url, backBtm_height, backBtm_paddingTop, backBtm_paddingLeft } = config
    const styleTop = { height: backTop_height, padding: `${backTop_paddingTop}px ${backTop_paddingLeft}px` }
    const styleBtm = { height: backBtm_height, padding: `${backBtm_paddingTop}px ${backBtm_paddingLeft}px` }
    return (
        <>
            <div className='StartBackConfig'>
                {backType === 'color' && <div className='BackBase_Color' style={{ background: ColorCallBack(backColor, backColor__Deg) }} />}
                {backType === 'image' && <img className='BackBase_Image' src={backImage} alt="" />}
                {backType === 'video' && <VideoTempA01 url={backVideo} seekTimeStart={backVideoStart} seekTimeEnd={backVideoEND} />}
            </div>
            {backTop && <div className='StartBackTop' style={styleTop}>
                {backTop_url && <img src={backTop_url} alt="" />}
            </div>}
            {backBtm && <div className='StartBackBtm' style={styleBtm}>
                {backBtm_url && <img src={backBtm_url} alt="" />}
            </div>}
        </>
    )
}

export default StartBackConfig;